<template>
  <el-container class="contatainer">
    <!-- 头部 -->
    <el-header></el-header>
    <!-- 主体 -->
    <el-container>
      <!--内容-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

    <!-- 底部 -->
    <el-footer></el-footer>

    <!--右侧-->
    <el-right></el-right>

	</el-container>
</template>

<script>
  import ElHeader from "../components/ElHeader";
  import ElFooter from "../components/ElFooter";
  import ElRight from "../components/ElRight";

  export default {
    name: 'home',
    //import引入的组件需要注入到对象中才能使用
    components: { ElHeader,ElFooter,ElRight},
    data() {
      return {
        defaultActives: "",
        defaultActive: "", //记录当前点击ID
        items: [
          {
            icon: "el-icon-s-open",
            index: "/",
            title: "首页"
          },
          {
            icon: "el-icon-rank",
            index: "2",
            title: "用户",
            subs: [
              {
                index: "data1",
                title: "数据1",
                children: [
                  {
                    index: "addata1",
                    title: "添加"
                  }
                ]
              },
              {
                index: "data2",
                title: "数据2"
              },
              {
                index: "data3",
                title: "数据3"
              }
            ]
          },
          {
            icon: "el-icon-date",
            index: "3",
            title: "组件",
            subs: [
              {
                index: "zujian1",
                title: "方法一"
              },
              {
                index: "zujian2",
                title: "方法二"
              },
              {
                index: "zujian3",
                title: "方法三"
              }
            ]
          }
        ],
        // 左侧菜单数据
        menuList: [
          {
            path: "/1",
            name: "导航一",
            icon: 'el-icon-menu',
            children: [
              {
                path: "/1/1",
                name: "导航1-1",
                icon: 'el-icon-menu',
                children: [
                  {
                    path: "/1/1/1",
                    name: "导航1-1-1",
                    icon: 'el-icon-menu',
                  },
                  {
                    path: "/1/1/2",
                    name: "导航1-1-2",
                    icon: 'el-icon-menu',
                  },
                  {
                    path: "/1/1/3",
                    name: "导航1-1-3",
                    icon: 'el-icon-menu',
                  }
                ]
              },
              {
                path: "/1/2",
                name: "导航1-2",
                icon: 'el-icon-menu',
              }
            ]
          },
          {
            path: "/2",
            name: "导航二",
            icon: 'el-icon-menu'
          }
        ],
        isCollapse: false,
        screenWidth:0,
        showToggle: true
      }
    },
    mounted() {
      const that = this
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          that.listeningWindow(window.screenWidth)
        })()
      }
    },
    watch: {
      screenWidth(val) {
        if (!this.timer) {
          this.screenWidth = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    },
    created() {
      let that = this;
      let windowWidth = document.body.clientWidth;
      that.listeningWindow(windowWidth)
    },
    methods: {
      //监听窗口
      listeningWindow(windowWidth) {
        let that = this;
        if (windowWidth > 1170) {
          if(!that.isCollapse){
            this.isCollapse = false;
            this.screenWidth = 150;
          }
          this.showToggle = true
        }
        if (windowWidth < 1170 && windowWidth > 767) {
          setTimeout(function() {
            that.screenWidth = 65;
          }, 400)
          this.isCollapse = true;
          this.showToggle = false;
        }
        if (windowWidth < 767) {
          this.screenWidth = 0;
          this.isCollapse = false;
          this.showToggle = false;
        }
      },
      togleCollapse() {
        let that = this;
        if(!this.isCollapse){
          setTimeout(function() {
            that.screenWidth = 65;
          }, 400)
        }else {
          this.screenWidth = 150;
        }
        this.isCollapse = !this.isCollapse
      },
    }
  }
</script>

<style scoped>
  @import '.././assets/css/index.css';
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
  }
</style>
